<template>
	<swiper v-if="showslide" :options="swiperOption" class="wrapper">
		<!-- slides -->
		<swiper-slide v-for="item of list" :key="item.id"><img class="slide-img" :src="item.imgUrl" :alt="item.title"></swiper-slide>
		
		<!-- Optional controls -->
		<div class="swiper-pagination"  slot="pagination"></div>
	</swiper>
</template>
<script>
	export default {
		name: 'HomeSwiper',
		props: {
			list: Array
		},
		data () {
			return {
				swiperOption: {
					loop: true,
					autoplay: {
						delay: 2500,
						disableOnInteraction: false
					},
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					},
					observer:true,//修改swiper自己或子元素时，自动初始化swiper
					observeParents:true,//修改swiper的父元素时，自动初始化swiper
				}
			}
		},
		computed: {
			showslide () {
				return this.list.length
			}
		}
	}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/setting';
@import '~@/assets/scss/css3';
@import '~@/assets/scss/mixin';
@import '~@/assets/scss/reset';
@import '~@/assets/scss/style';

.swiper-pagination-bullet-active {
	background: #fff;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: px2rem(0px);
}
.wrapper {
	overflow: hidden;
	height: 0;
	padding-bottom: 26.5%;
	.slide-img {
		width: 100%
	}
}

</style>